<template>
  <!--     登录页面 -->
  <div id="Login">
    <div id="loginVessels">
      <h1>{{num}}</h1>
      <!--        账号-->
      <!-- <div id="account">
        <h3>账号</h3>
        <el-input class="accountIpt" v-model="account" placeholder="请输入账号"></el-input>
      </div> -->
      <!--        密码-->
      <div id="password">
        <h3>密码</h3>
        <el-input v-model="password" show-password placeholder="请输入密码"></el-input>
      </div>
      <!--        邮箱-->
      <div id="email">
        <h3>邮箱</h3>
        <el-input placeholder="请输入邮箱" v-model="email" :disabled="disabled"></el-input>
      </div>
      <!--        验证码-->
      <div id="code">
        <h3>验证码</h3>
        <div id="codeIpt">
          <el-input placeholder="请输入验证码" v-model="code"></el-input>
        </div>
        <div id="codeBtn" @click="getCode">{{getCodes}}</div>
      </div>
      <!--        登录-->
      <div id="loginBtn" @click="login">登录</div>
      <!--        注册-->
      <div id="signBtn" @click="sign">提交</div>
    </div>
  </div>
</template>

<script>
import '../assets/login.css'
export default {
  name: 'Sign',
  data () {
    return {
      num: '找回密码',
      account: '',
      password: '',
      email: '',
      trueEmail: '',
      code: '',
      getCodes: '获取验证码',
      judgeCodes: true,
      disabled: false
    }
  },
  methods: {
    login () {
      this.$router.push({
        name: 'Login'
      })
    },
    sign () {
      // 判断账号密码长度是否合法
      if (this.password === '') {
        this.$message('密码不能为空')
      } else if (this.password.length < 6 || this.password.length > 16) {
        this.$message('密码位数为6~16')
      } else if (this.trueEmail === '') {
        this.$message('请输入正确的验证码')
      } else {
        // 用户注册
        this.userSign().then(data => {
          if (data.code === 200) {
            this.$message(data.object)
            setTimeout(() => {
              this.$router.push({
                name: 'Login'
              })
            }, 1000)
          } else {
            this.$message(data.message)
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    getCode () {
      // 获取验证码按钮不可点击
      this.judgeCodes = false
      var codeTime = 60
      this.getCodes = codeTime + 's'
      var timer = setInterval(() => {
        codeTime--
        this.getCodes = codeTime + 's'
        if (codeTime === 0) {
          // 关闭定时器
          clearInterval(timer)
          this.getCodes = '获取验证码'
          // 获取验证码按钮可点击
          this.judgeCodes = true
        }
      }, 1000)
      // 获取验证码
      this.obtain().then(data => {
        if (data.code === 200) {
          this.disabled = true
          this.trueEmail = this.email
        }
      })
    },
    // 获取验证码
    obtain () {
      return new Promise((resolve, reject) => {
        this.$axios({
          url: '/Menu/Visitor/sendCode',
          params: {
            email: this.email
          }
        }).then(data => {
          resolve(data.data)
        }).catch(err => {
          reject(err)
        })
      })
    },
    // 找回密码
    userSign () {
      console.log(this.code)
      console.log(this.trueEmail)
      console.log(this.password)
      return new Promise((resolve, reject) => {
        this.$axios({
          method: 'post',
          url: '/Menu/Visitor/updatePassword',
          params: {
            code: this.code,
            email: this.trueEmail,
            newPassword: this.password
          }
        }).then(data => {
          resolve(data.data)
        }).catch(err => {
          reject(err)
        })
      })
    }
  }
}

</script>

<style lang="less" scoped>
#Login{
  width: 100vw;
  height: 100vh;
  background-image: url("../assets/background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  #loginVessels{
    position: fixed;
    top: 80px;
    left: 150px;
    width:390px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 40px;
    h1{
      text-align: center;
      margin-bottom: 10px;
    }
    h3{
      font-weight: 500;
      margin-bottom: 10px;
    }
    #account{
      margin-bottom: 10px;
    }
    #password{
      margin-bottom: 10px;
    }
    #email{
      margin-bottom: 10px;
    }
    #code{
      margin-bottom: 10px;
      overflow: auto;
      #codeIpt{
        width: 50%;
        float: left;
      }
      #codeBtn{
        width: 50%;
        float: left;
        background-color: #ff9512;
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #fff;
        font-size: 14px;
        cursor: pointer;
      }
    }
    #forgetPassword{
      display: block;
      width: 100%;
      height: 30px;
      line-height: 30px;
      color: rgb(24,160,251);
      text-align: right;
      font-size: 14px;
      margin-bottom: 20px;
    }
    #btn{
      width: 100%;
      height: 40px;
      border-radius: 2px;
      text-align: center;
      line-height: 40px;
      color: #ffffff;
      font-size: 18px;
      font-weight: 500;
      cursor: pointer;
    }
    #signBtn{
      #btn();
      background-color: rgb(255,149,18);
      &:active{
        background-color: rgba(225, 149, 18, .7)
      }
    }
    #loginBtn{
      #btn();
      background-color: rgb(191,191,191);
      margin-bottom: 20px;
      &:active{
        background-color: rgba(191,191,191,.7);
      }
    }
  }
}
</style>
